<template>
    <el-dialog title="选择样品产品数据" class='product-dialog' append-to-body width='1200px' @close="closeEvt" ref="ruleForm"
        :visible.sync="show">
        <page-layout>
            <template v-slot:header>
                <el-input v-model="query.name" placeholder="输入产品名字查询" size='small' />
                <el-button type='primary' size='small' @click="queryEvt">查询</el-button>
            </template>

            <el-table :data="tableData" style="width: 100%" height="100%" size='small'>
                <el-table-column width="55" fixed />
                <el-table-column prop="name" label="名字" width="160" />
                <el-table-column prop="price" label="价格" width="120" />
                <el-table-column prop="brand" label="品牌" width="160" />
                <el-table-column prop="" label="产商" width="160" />
                <el-table-column prop="place" label="产地" show-overflow-tooltip width="240" align="center" />
                <el-table-column label="操作" width="180" align="center">
                    <template slot-scope="{ row }">
                        <el-button type="text" size="small" @click="pickEvt(row)">选择</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <template v-slot:footer>
                <el-pagination :page-sizes="[20, 50, 100, 150]" :page-size="query.size" :current-page="query.page"
                    @size-change="sizeChange" @current-change="currentChange"
                    layout="total, sizes, prev, pager, next, jumper" :total="total" />
            </template>
        </page-layout>
    </el-dialog>
</template>

<script>
import { productListApi } from '@/apis/productApi'
export default {
    props: {
        value: {
            type: Boolean,
            required: true
        }
    },

    watch: {
        value(val) {
            this.show = val
        }
    },

    data() {
        return {
            show: false,
            tableData: [],
            query: {
                name: '',
                page: 1,
                size: 20
            },
            total: 0,
            timer: null,
            selectedRows: [],
            loading: true
        }
    },

    mounted() {
        this.getList()
    },

    methods: {
        pickEvt(row) {
            this.$emit('pickDataEvt', row)
        },
        closeEvt() {
            this.$emit('input', false)
        },
        queryEvt() {
            this.query.page = 1
            this.getList()
        },
        async getList() {
            this.loading = true
            let result = await productListApi(this.query)
            if (result.code === 200) {
                this.tableData = result.data.rows
                this.total = result.data.count
            }
        },
        fd() {
            if (this.timer) clearTimeout(this.timer)
            this.timer = setTimeout(() => {
                this.getList()
            }, 100)
        },
        sizeChange(size) {
            this.query.size = size
            this.fd()
        },
        currentChange(page) {
            this.query.page = page
            this.fd()
        }
    }
}
</script>